import { Grid, Card, Flex, Tag, Button, Toast } from 'react-vant';
import { ShopO } from '@react-vant/icons';
import Progress from '@/components/Progress';
import './index.less';
import { useEffect, useState } from 'react';
import { sprite } from '@/utils/myinterface';
import { connect } from 'dva';
import * as _ from 'lodash';
export default connect(({ index }) => index)((props) => {
  useEffect(() => {
    getDetail();
  }, []);

  const [spriteArry, setSpriteArry] = useState<Array<sprite>>([]);
  const [curSprite, setCurSprite] = useState<sprite>({});
  useEffect(() => {
    props.dispatch({
      type: 'index/saveSpriteArry',
      payload: spriteArry,
    });
  }, [spriteArry]);
  const getDetail = () => {
    setSpriteArry(props.spriteArry);
    setCurSprite(props.spriteArry[0]);
  };
  const changeSprite = (i: number) => {
    setCurSprite(spriteArry[i]);
  };
  const changeFirstSprite = () => {
    setSpriteArry((spriteArry) => {
      const index = spriteArry.findIndex((item) => item.name == curSprite.name);
      let newSpriteArry = _.cloneDeep(spriteArry);
      newSpriteArry.splice(index, 1);
      newSpriteArry.unshift(curSprite);
      return newSpriteArry;
    });
  };
  const returnCurSpriteHP = () => {
    if (curSprite.attr.currAttr.hp == curSprite.attr.maxAttr.hp)
      return Toast({ message: '你的精灵很健康' });
  };
  const returnAllSpriteHP = () => {
    let newspriteArry = _.cloneDeep(spriteArry);
    newspriteArry.forEach((item) => {
      item.attr.currAttr.hp = item.attr.maxAttr.hp;
    });
    Toast({ message: '你的精灵全部回复完毕了' });
    setSpriteArry(newspriteArry);
  };
  return (
    <>
      <div>
        {
          <Card style={{ height: '100vh' }}>
            <Card.Header>名称：{curSprite?.name}</Card.Header>
            <Card.Body>
              <h2>属性</h2>
              <Flex>
                <Flex.Item span={8}>
                  攻击：{curSprite?.attr?.maxAttr?.atk}
                </Flex.Item>
                <Flex.Item span={8}>
                  特攻：{curSprite?.attr?.maxAttr?.int}
                </Flex.Item>
                <Flex.Item span={8}>
                  速度：{curSprite?.attr?.maxAttr?.agl}
                </Flex.Item>
              </Flex>
              <Flex>
                <Flex.Item span={8}>
                  防御：{curSprite?.attr?.maxAttr?.def}
                </Flex.Item>
                <Flex.Item span={8}>
                  特防：{curSprite?.attr?.maxAttr?.res}
                </Flex.Item>
                <Flex.Item span={8}>
                  体力：{curSprite?.attr?.maxAttr?.phy}
                </Flex.Item>
              </Flex>
              <h2>生命</h2>
              <Progress
                round
                parNum={curSprite?.attr?.maxAttr?.hp}
                contentNum={curSprite?.attr?.currAttr?.hp}
              ></Progress>

              <h2>经验</h2>
              <Progress
                round
                parNum={curSprite?.exp?.maxExp}
                contentNum={curSprite?.exp?.currExp}
                contentColor="#e4e444"
              ></Progress>

              <Grid square columnNum={3} gutter={15}>
                {!!spriteArry &&
                  spriteArry.map((item, i) => (
                    <Grid.Item
                      key={i}
                      icon={<ShopO />}
                      text={item.name}
                      onClick={() => changeSprite(i)}
                    />
                  ))}
              </Grid>

              <Flex justify="center">
                <Flex.Item>
                  <Button
                    type="primary"
                    block
                    round
                    onClick={changeFirstSprite}
                  >
                    设定为首选
                  </Button>
                </Flex.Item>
                <Flex.Item>
                  <Button type="primary" block round>
                    恢复当前精灵
                  </Button>
                </Flex.Item>

                <Flex.Item>
                  <Button
                    type="primary"
                    block
                    round
                    onClick={returnAllSpriteHP}
                  >
                    回复全部精灵
                  </Button>
                </Flex.Item>
              </Flex>
            </Card.Body>
          </Card>
        }
      </div>
    </>
  );
});
